<template>
	<div>
    <zh-form ref="formInfoPageRef"  :model="state.form"  :rules="state.rules">
      <zh-form-input
				prop="formCode"
        :disabled="state.codeDisabled||props.showFlag"
				label="表单编码"
				placeholder="请输入表单编码"
				v-model="state.form.formCode"
			></zh-form-input>
      <zh-form-input
				prop="formTitle"
				label="表单名称"
        :disabled="props.showFlag"
				placeholder="请输入表单名称"
				v-model="state.form.formTitle"
			></zh-form-input>
      <zh-form-cascader
        prop="formClassCode"
        label="表单分类"
        placeholder="请选择"
        :disabled="props.showFlag"
        :props="{checkStrictly: true,emitPath:false}"
        v-model="state.form.formClassCode"
        :options="state.classSelectTreeData"
      ></zh-form-cascader>
      <zh-form-input
				prop="formVersion"
				label="版本"
        :disabled="props.showFlag"
				placeholder="请输入表单版本"
				v-model="state.form.formVersion"
			></zh-form-input>
      <zh-form-select prop="lastFlag"  :disabled="props.showFlag" label="默认使用" :options="state.flagDictData" placeholder="请选择" v-model="state.form.lastFlag"></zh-form-select>
      <zh-form-select prop="formType" :disabled="props.showFlag" label="表单类型" :options="state.formTypeDictData" placeholder="请选择" v-model="state.form.formType"></zh-form-select>
      <zh-form-select prop="formStatus" :disabled="props.showFlag" label="有效状态" :options="state.statusDictData" placeholder="请选择" v-model="state.form.formStatus"></zh-form-select>
      <zh-form-item label="图标" prop="icon">
				<IconSelector placeholder="请输入图标" :disabled="props.showFlag" v-model="state.form.icon" />
			</zh-form-item>
      <zh-form-input
				prop="formComponent"
				label="表单组件"
        :disabled="props.showFlag"
				placeholder="请输入表单组件"
				v-model="state.form.formComponent"
			></zh-form-input>
      <zh-form-input
				prop="iconImgUrl"
				label="图标图片地址"
        :disabled="props.showFlag"
				placeholder="请输入图标图片地址"
				v-model="state.form.iconImgUrl"
			></zh-form-input>
      <zh-form-input prop="orderNo" :disabled="props.showFlag" label="排序" placeholder="" v-model="state.form.orderNo"></zh-form-input>
      <zh-form-choose-org prop="orgId" :disabled="props.showFlag" label="所属组织" v-model="state.form.orgId"></zh-form-choose-org>
      <zh-form-cascader
        prop="areaCode"
        label="行政区划"
        :disabled="props.showFlag"
        placeholder="请选择"
        :props="{checkStrictly: true,emitPath:false}"
        v-model="state.form.areaCode"
        :options="state.areaCodeSelectTreeData"
      ></zh-form-cascader>
      <zh-form-select
        prop="appId"
        :lazy="true"
        label="所属应用"
        :disabled="props.showFlag"
        v-model="state.form.appId"
        :fieldNames="{ label: 'appName', value: 'appId' }"
        funcCode="application0012"
        searchField="appName"
      ></zh-form-select>   
      <zh-form-input :span="24" :disabled="props.showFlag" :rows="4" prop="remarks" type="textarea" label="备注" v-model="state.form.remarks"></zh-form-input> 
    </zh-form>
  </div>
</template>
<script lang="ts" setup name="FormInfoForm">
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	formInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
  showFlag:{
    type:Boolean,
    default:false
  },
  modelValue: Boolean,
});
//------------------定义子组件---------------------------
const formInfoPageRef=ref()
const emit = defineEmits(['update:modelValue']);
//------------------内部变量定义-------------------------
const state=reactive({
  form:{newFlag:'0',icon:undefined},
  rules:{
    formCode: [
      {
        required: true,
        message: '请输入表单编号',
        trigger: 'blur',
      },
    ],
    formTypeName: [
      {
        required: true,
        message: '请输入表单名称',
        trigger: 'blur',
      },
    ],
    formClassCode: [
      {
        required: true,
        message: '请选择表单分类',
        trigger: 'blur',
      },
    ],
    formVersion: [
      {
        required: true,
        message: '请输入表单版本',
        trigger: 'blur',
      },
    ],
    formType: [
      {
        required: true,
        message: '请选择表单类型',
        trigger: 'blur',
      },
    ],
    formStatus: [
      {
        required: true,
        message: '请选择有效状态',
        trigger: 'blur',
      },
    ],
    lastFlag: [
      {
        required: true,
        message: '请选择是否当前使用',
        trigger: 'blur',
      },
    ],
  },
  formTypeDictData:[{dictKey:'1',dictValue:'使用组件'},{dictKey:'2',dictValue:'自行开发'}],
  flagDictData:[{dictKey:'1',dictValue:'是'},{dictKey:'0',dictValue:'否'}],
  statusDictData:[{dictKey:'1',dictValue:'启用'},{dictKey:'0',dictValue:'禁用'}],
  areaCodeSelectTreeData:[],
  classSelectTreeData:[],
  codeDisabled:false,
  excelTypeDisabled:false,
})
//------------------定义调用方法-------------------------
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}
function getClassTree() {
	setTimeout(() => {
		$api.common.send.post('formClass0007', {}).then((res) => {
			state.classSelectTreeData = res.result;
		});
	}, 20);
}

function getDetail(){
  if(!props.formInfo||!props.formInfo.formId){
    return;
  }
  let params={formId:props.formInfo.formId};
  $api.common.send.post('formInfo0002', params).then((res) => {
    state.codeDisabled=true
		state.form = Object.assign({},res.result);
	});
}
async function save(){
  //校验表单
	let checkFlag = await formInfoPageRef.value.checkForm();
	if (checkFlag) {
    const info = state.form;
    let ret=null;
		if (!props.showFlag&&info.formId) {
      ret=await $api.common.send.post('formInfo0005',info);
      ret.saveType = 'edit';
      if(ret.code === 0){
        ElMessage.success('修改成功！');
        emit('update:modelValue', false);
      }
    } else {
      ret=await $api.common.send.post('formInfo0004',info);	
      ret.saveType = 'add';
      if(ret.code === 0){
        ElMessage.success('新建成功！');
        emit('update:modelValue', false);
      }
		}
    return ret;
  }
	return null;
}
//------------------初始化------------------------------
onMounted(()=>{
  getAreaCodeData();
  getClassTree();
  getDetail();
})

//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ form: state.form ,save});
</script>
<style lang="scss" scoped></style>
